<template>
  <el-aside width="200px">
    <el-row class="tac">
      <el-col>
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="0" @click="goPage('home')">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="1" v-show="showAll" >
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>权限信息管理</span>
            </template>
            <el-menu-item-group>
<!--          @click=""中,方法写在""中,其中的方法的参数,需要用到单引号;双引号中用单引号-->
              <el-menu-item index="1-1" @click="goPage('mgrInfo')">管理员</el-menu-item>
              <el-menu-item index="1-2" @click="goPage('userInfo')">用户</el-menu-item>
              <el-menu-item index="1-3" @click="goPage('entrInfo')">企业</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2" v-show="!showAll">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>个人信息管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="goPage('userOneInfo')"  v-show="showUser" >个人信息</el-menu-item>
              <el-menu-item index="2-2" @click="goPage('resumeOneInfo')" v-show="showUser">简历信息</el-menu-item>
              <el-menu-item index="2-3" @click="goPage('entrOneInfo')" v-show="showEntr">企业信息</el-menu-item>
              <el-menu-item index="2-4" @click="goPage('entrByselfRecruit')" v-show="showEntr">职位招聘信息</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>招聘信息管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="goPage('resumeInfo')" v-show="!showUser">简历信息</el-menu-item>
              <el-menu-item index="2-2" @click="goPage('recruitInfo')" v-show="!showEntr">招聘信息</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="5" @click="goPage('talk')" v-show="showTalk">
            <i class="el-icon-menu"></i>
            <span slot="title">聊天室</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </el-aside>
</template>

<script>
  export default {
    name: "nav-left",

    data() {
      return {
        //定义的显示或隐藏组件
        showAdmin:'',
        showUser:'',
        showEntr:'',
        showAll:'',
        showTalk:'',
      };
    },

    mounted() {
      //初始化方法 页面加载自动执行方法
      this.showTool()
    },
    methods: {

      //方法 判断全局变量 1:管理员 2:用户 3:企业
      showTool(){
        console.log("left我运行了")
        switch (this.$store.state.show) {
          case '1':
            this.showAll=true;
            this.showAdmin=true;
            this.showTalk=false;
            break
          case '2':
            this.showUser=true;
            this.showEntr=false;
            this.showAll=false;
            this.showTalk=true;
            break;
          case '3':
            this.showUser=false;
            this.showEntr=true;
            this.showAll=false;
            this.showTalk=true;
            break
        }
      },

      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },

      goPage(link) {
        if (link === "home") {
          this.$router.push("/index").catch(error => error);
        } else if ((link === "entrInfo")) {
          this.$router.push("/entrInfo").catch(error => error);
        } else if ((link === "mgrInfo")) {
          this.$router.push("/mgrInfo").catch(error => error);
        }else if ((link === "userInfo")) {
          this.$router.push("/userInfo").catch(error => error);
        }else if ((link === "order")) {
          this.$router.push("/order").catch(error => error);
        }else if ((link === "resumeInfo")) {
          this.$router.push("/resumeInfo").catch(error => error);
        }else if ((link === "recruitInfo")) {
          this.$router.push("/recruitInfo").catch(error => error);
        }else if ((link === "userOneInfo")) {
          this.$router.push("/userOneInfo").catch(error => error);
        }else if ((link === "resumeOneInfo")) {
          this.$router.push("/resumeOneInfo").catch(error => error);
        }else if ((link === "entrOneInfo")) {
          this.$router.push("/entrOneInfo").catch(error => error);
        }else if ((link === "entrByselfRecruit")) {
          this.$router.push("/entrByselfRecruit").catch(error => error);
        }else if ((link === "talk")) {
          this.$router.push("/talk").catch(error => error);
        }
      }
    }
  };
</script>

<style scoped>
  .el-row{
    height: 100%;
  }

  .el-menu{
    border-right:none;
  }
  .el-aside{
    border-right: 1px solid #f5f1f1;
    background-color: #545c64;

  }
  .el-menu-item{
    background-color: #545c64;
  }
</style>
